<template>
	<view style="display: grid; grid-template-rows: calc(100rpx) auto; height: 100%">
		<view>
			<u-tabs ref="utab" :list="typeList" :current="current" @change="changeTab"></u-tabs>
		</view>
		<view style="position: relative">
			<view style="padding-top: 30%" v-if="loading">
				<u-loading-icon text="加载中" textSize="32" size="38" vertical></u-loading-icon>
			</view>
			<uni-indexed-list :options="filterList" @click="bindClick"></uni-indexed-list>
		</view>
	</view>
</template>
<script>
	import Pinyin from "../../../utils/piyin/toPinyin"
	export default {
		props: {
			lastLevel: {
				type: Number,
				default: () => {
					return 3
				}
			}
		},
		data() {
			return {
				loading: false,
				current: 0,
				typeList: [],
				list: []
			}
		},
		computed: {
			filterList() {
				let cloneData = uni.$u.deepClone(this.list[this.current])
				if (cloneData) {
					return cloneData.map((item) => {
						console.log(item.data)
						item.data = item.data.map((item) => item.name)
						return item
					})
				} else {
					return []
				}
			},
		},
		created() {
			this.getAddress()
			for (let i = 0; i < this.lastLevel; i++) {
				this.typeList.push({
					name: '请选择'
				})
			}
		},
		methods: {
			changeTab({
				index
			}) {
				if (this.typeList[index].name == "请选择") {
					this.current = 0
					for (let i = 0; i < this.typeList.length; i++) {
						if (this.typeList[i].name == "请选择") {
							this.$refs.utab.innerCurrent = i
							this.$set(this, "current", i)
							break
						}
					}
					return
				}
				this.current = index
			},
			async getAddress() {
				this.loading = true
				try {
					let data
					if (this.current == 0) {
						data = [{
							id: 1827,
							name: "南昌市",
							pid: 21
						}]
					} else {
						let url = ['/api/common/getAreaList', '/api/Activity/community']
						let res = await this.$http({
							url: url[this.current - 1],
							data: {
								page: 1,
								limit: 9999,
								city_id: this.getId(),
								area_id: this.getId()
							},
						})
						data = res.data
					}
					data.forEach((item) => {
						item.firstPinyin = Pinyin.chineseToPinYin(item.name).slice(0, 1)
					})
					let resData = this.getFirstPinyin(data)
					this.list.splice(
						this.current,
						0,
						Object.keys(resData).map((item) => {
							return {
								letter: item,
								data: resData[item],
							}
						})
					)
				} finally {
					this.loading = false
				}
			},
			// async getAddress() {
			// 	this.loading = true
			// 	try {
			// 		let url = ["/api/common/getProvinceList", "/api/common/getCityList", "/api/common/getAreaList", "/api/Activity/community"]
			// 		let { data } = await this.$http({
			// 			url: url[this.current],
			// 			data: {
			// 				page:1,
			// 				limit:9999,
			// 				province_id: this.current == 1 ? this.getId() : "",
			// 				city_id: this.current == 2 ? this.getId() : "",
			// 				...this.current == 3 ? { area_id: this.getId() } : {}
			// 			},
			// 		})
			// 		data.forEach((item) => {
			// 			item.firstPinyin = Pinyin.chineseToPinYin(item.name).slice(0, 1)
			// 		})
			// 		let resData = this.getFirstPinyin(data)
			// 		this.list.splice(
			// 			this.current,
			// 			0,
			// 			Object.keys(resData).map((item) => {
			// 				return {
			// 					letter: item,
			// 					data: resData[item],
			// 				}
			// 			})
			// 		)
			// 	} finally {
			// 		this.loading = false
			// 	}
			// },
			getId() {
				return this.list[this.current - 1]
					.map((item) => item.data)
					.flat(2)
					.find((item) => item.name == this.typeList[this.current - 1].name).id
			},
			getAllId() {
				let ids = []
				this.typeList.forEach((item, index) => {
					if (index < this.lastLevel) {
						ids.push(this.list[index].map((item) => item.data).flat(2).find((item) => item.name == this
							.typeList[index].name).id)
					}
				})
				return ids
			},
			getFirstPinyin(data) {
				// 循环data把首字母相同的放在一起
				let obj = {}
				data.forEach((item) => {
					if (obj[item.firstPinyin]) {
						obj[item.firstPinyin].push(item)
					} else {
						obj[item.firstPinyin] = [item]
					}
				})
				return obj
			},
			bindClick({
				item: {
					name
				},
				item
			}) {
				this.typeList.forEach((item, index) => {
					if (index > this.current) {
						item.name = "请选择"
					}
				})
				if (this.current < this.lastLevel) {
					this.typeList[this.current].name = name
				}
				if (this.current + 1 >= this.lastLevel) {
					console.log(this.getAllId()[this.getAllId().length - 1], '11111')
					this.$emit('select', {
						id: this.getAllId()[this.getAllId().length - 1],
						name: name
					})
					return
				}
				this.current += 1
				this.getAddress()
			},
		},
	}
</script>